<template>
	<view class="page-content">
		<view class="n_title"><span class="n_back" @click="common.navback()"> < </span>{{title}}</view>
		<view class="content-content">
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">告警描述</view>
				</view>
				<view class="w-i">
					<span>报警来源:</span>
					<span v-if="info.type=='1'">门限</span>
					<span v-if="info.type=='2'">AI</span>
				</view>
				<view class="w-i">
					<span>报警名:</span>
					<span>{{info.waringName}}</span>
				</view>
				<view class="w-i">
					<span>处理策略:</span>
					<span>{{common.timestampToTimeMils(info.waringTimeLatest)}}</span>
				</view>
				<view class="w-i">
					<span>最新告警时间:</span>
					<span>{{info.waringName}}</span>
				</view>
				<view class="uni-row1 t10" v-if="info.status=='0'">
					<view>
						<button class="btn" style="width: 50%;background: #8996b2;font-size: 12px;" type="primary" @click="dealStatus(2)">误报</button>
					</view>
					<view>
						<button class="btn" style="width: 50%;font-size: 12px;" type="primary" @click="dealStatus(1)">确认</button>
					</view>
				</view>
			</view>
			<view v-if="info.status == '1'">
				<view class="d-pannel t10">
					<view class="uni-row1-title">上传现场图片</view>
					<view class="t10">
						<uni-file-picker :image-styles="imageStyles" :readonly="info.resStatus == '2'" :list-styles="listStyles" v-model="liveImg" @delete="delLive" @select="selectLive"></uni-file-picker>
					</view>
					<view class="uni-row1-title t10">现场描述</view>
					<view class="t10">
						<uni-easyinput :disabled="info.resStatus == '2'"
						:styles="{ 
							backgroundColor:'#15203C',
						    borderColor: '#15203C', // 设置边框颜色
						    hoverBorderColor: '#15203C', // 设置悬停状态边框颜色
						    focusBorderColor: '#15203C', // 设置聚焦状态边框颜色
							color:'#ffffff'
						  }"
						type="textarea" v-model="form.desc" placeholder="请输入现场描述"></uni-easyinput>
					</view>
					<view class="uni-row1-title">上传处理图片</view>
					<view class="t10">
						<uni-file-picker :image-styles="imageStyles" :readonly="info.resStatus == '2'" :list-styles="listStyles" v-model="dealImg" @delete="dealDealimg" @select="selectDeal"></uni-file-picker>
					</view>
					<view class="uni-row1-title t10">处理策略反馈</view>
					<view class="t10">
						<uni-easyinput :disabled="info.resStatus == '2'"
						:styles="{
							backgroundColor:'#15203C',
						    borderColor: '#15203C', // 设置边框颜色
						    hoverBorderColor: '#15203C', // 设置悬停状态边框颜色
						    focusBorderColor: '#15203C', // 设置聚焦状态边框颜色
							color:'#ffffff'
						  }"
						type="textarea" v-model="form.strategyDesc" placeholder="请输入处理策略反馈"></uni-easyinput>
					</view>
				</view>
				
				<view class="t10">
					<view class="uni-row1-title t10">打分</view>
					<view class="t10">
						<uni-rate :readonly="info.resStatus == '2'" v-model="form.rate" />
					</view>
				</view>
				
				<view class="t10" style="padding-bottom: 10px;">
						<button v-if="info.resStatus=='1'" class="btn" type="primary" @click="deal()">提交</button>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				title: '',
				info:{},
				liveImg:[],
				dealImg:[],
				form:{
					liveImg:[],
					desc:null,
					strategyDesc:null,
					dealImg:[],
					rate:null
				},
				 imageStyles:{
					 color: 'red',  // 控制加号颜色
					 border: {
					   color: '#8c99bc',  // 边框颜色
					   width: '2rpx'
					 }
				 },
				listStyles:{
					width:50,
					height:50,
				}
			}
		},
		onShow(){
			this.getData()
		},

		onLoad(query) {
			this.id=query.id
			this.title=query.name
		},
		methods: {
			selectLive(e){
				console.info(1)
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl=tempFilePaths[0]
				let url='/api/work-order/info'
				this.common.upload(imgUrl,(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					res.data.tempFilePath = imgUrl
					this.form.liveImg.push(res.data)
					
				})
			},
			delLive(e){
				const num = this.form.liveImg.findIndex(v => v.tempFilePath === e.tempFilePath);
				this.form.liveImg.splice(num, 1);
			},
			selectDeal(e){
				console.info(1)
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl=tempFilePaths[0]
				let url='/api/work-order/info'
				this.common.upload(imgUrl,(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					res.data.tempFilePath = imgUrl
					this.form.dealImg.push(res.data)
					
				})
			},
			dealDealimg(e){
				const num = this.form.dealImg.findIndex(v => v.tempFilePath === e.tempFilePath);
				this.form.dealImg.splice(num, 1);
			},
			getData(){
				let url='/api/work-order/info'
				this.common.get(url,{
					id:this.id,
				},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.info = res.data
					this.form = res.data
					this.liveImg = []
					if (this.info.liveImg){
						for (let i=0;i<this.info.liveImg.length;i++){
							this.liveImg.push(this.info.liveImg[i])
						}
					}
					this.dealImg = []
					if (this.info.dealImg){
						for (let i=0;i<this.info.dealImg.length;i++){
							this.dealImg.push(this.info.dealImg[i])
						}
					}
				})
			},
			dealStatus(status){
				
				let name = '处理'
				if (status == '2'){
				  name = '误报'
				}
				this.common._confirm('是否确定['+name +']',(res)=>{
					let url = '/api/work-order/status'
					this.common.get(url,{
						id: this.id,
						status: status,
					},(res)=>{
						if(res.code!=1){
							this.common.showError(res.msg)
							return
						}
						this.getData()
						
					})
				})
			  },
			  deal(){
				  let url = '/api/work-order/deal'
				  this.form.id= this.id
				  this.common.post(url,this.form,(res)=>{
				  	if(res.code!=1){
				  		this.common.showError(res.msg)
				  		return
				  	}
				  	this.getData()
				  })
			  }
		}
	}
</script>

<style>
	/deep/ .file-picker__box-content{
		background: rgba(154,183,229,0.20)!important;;
		height: 80px!important;;
		width: 80px!important;;
	}
	/deep/ .file-picker__box-content > view{
		width:30px!important;;
		height: 2px!important;;
		background-color: #8c99bc!important;;
	}
	.file-picker__box-content > view{
		width:30px;
		height: 2px;
		background-color: #8c99bc;
	}
	/deep/ .is-disabled{
		background-color: #15203C!important;;
		border-color: #15203C!important;;
		color:#ffffff!important;
	}
	/* /deep/ .icon-add{
		width:30px;
		height: 2px;
		background-color: #8c99bc;
	} */
	.w-i{
		margin-top: 5px;
	}
	.w-i>span:first-child{
		color: #9ab7e5;
	}
	.w-i>span:last-child{
		padding-left: 10px;
	}
</style>
